<template>
  <div class="page-container">
    <el-container>
      <!-- 左侧添加部分 -->
      <el-aside width="600px" class="left-wrap">
        <div class="item">
          <div class="editor-container">
            <div class="editor-header"></div>
            <div class="editor-main-container">
              <!-- 模块部分 -->
              <div class="module" v-for="(item,index) in selectedList" :key="index" :data-id="item.moduleId"
                   @click="addModule(item)">
                <img :src="item.previewImg" class="module-image"/>
                <div class="editor-module">
                  <div class="editor-module-item">
                    <a href="javascript:;" class="delete" @click.stop="deleteItem(item)">删除</a>
                    <a href="javascript:;" class="up" @click.stop="upItem(item)"
                       v-if="selectedList.length>1 && index != 0">上移</a>
                    <a href="javascript:;" class="down" @click.stop="downItem(item)"
                       v-if="selectedList.length>1 && index != selectedList.length-1">下移</a>
                  </div>
                </div>
              </div>

              <!-- 所有模块按钮 -->
              <div class="edit-button-container">
                <div class="edit-button" v-for="item in totalList" :key="item.id" :data-id="item.id">
                  <a href="javascript:;" @click="addTemplate(item)">{{ item.name }}</a>
                  <img :src="item.previewImg" class="edit-image"/>
                </div>
                <!-- 保存 预览 按钮部分 -->
                <!-- <div class="save-wrap">
      <el-button type="primary" class="common-save" @click="saveIndex">保存</el-button>
      <el-button type="primary" class="common-save" @click="previewIndex">预览</el-button>
    </div>-->
              </div>
            </div>
          </div>
        </div>
      </el-aside>

      <!-- 右侧配置部分  -->
      <el-main>
        <!-- 保存 预览 按钮部分 -->
        <div class="view" style="margin: 10px 10px 10px 10px">
          <el-form>
            <!--            <a>整体页面配置名称</a>-->
            <el-form-item label="页面类型：">
              <el-input label="页面配置名称" placeholder="请输入配置方案名称" v-model="title">页面配置名称</el-input>
            </el-form-item>
            <el-form-item label="页面类型：">
              <!--              <el-input v-model="filters.pageType" clearable placeholder="名称搜索"></el-input>-->
              <el-select v-model="pageType" style="width:100%">
                <el-option label="平台首页" :value="1"></el-option>
                <el-option label="文章页" :value="2"></el-option>
                <el-option label="平台营销页" :value="3"></el-option>
                <el-option label="店铺首页" :value="3"></el-option>
                <el-option label="店铺营销页" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="有效期：" prop="startTime">
              <el-date-picker v-model="startTime" type="datetime" style="width: 15rem;"
                              placeholder="请选择结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="有效期：" prop="endTime">
              <el-date-picker v-model="endTime" type="datetime" style="width: 15rem;"
                              placeholder="请选择结束日期"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>

        <div class="save-wrap">
          <el-button type="primary" class="common-save" @click="saveIndex">总保存</el-button>
          <el-button type="primary" class="common-save" @click="previewIndex">预览</el-button>
          <el-button type="primary" class="common-save" @click="back">返回</el-button>
        </div>
        <div v-if="addModuleCode.code == 'SINGLE_MAP_CODE'">
          <addImages :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                     :SinglEMapDialogVisible="SinglEMapDialogVisible"
                     @SinglEMapDialogVisibleFun="SinglEMapDialogVisibleFun" @getIndex="getIndex"></addImages>
        </div>

        <!--多图轮播-->
        <div v-if="addModuleCode.code == 'MULTI_IMAGE_CODE'">
          <moreImages :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                      :MoreMapDialogVisible="MoreMapDialogVisible" @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                      @getIndex="getIndex"></moreImages>
        </div>
        <!--标题模板-->
        <div v-if="addModuleCode.code == 'MODULE_NAME_CODE'">
          <moduleName :moduleId="addModuleCode.moduleId" :datas="addModuleCode.variablesObject"
                      :moduleNameDialogVisible="moduleNameDialogVisible"
                      @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                      ref="moduleName"></moduleName>
        </div>
        <div v-if="addModuleCode.code == 'TWO_PRODUCT_CODE' || addModuleCode.code == 'THREE_PRODUCT_CODE'">
          <div class="productProduct">
            <el-button :size="size" type="primary" @click="showProductList">添加商品</el-button>
          </div>
          <div class="table-section">
            <el-table :data="productListData" v-loading="productListloading" :header-cell-style="tableHeaderColor"
                      ref="multipleTable" style="width: 100%" :row-class-name="tableRowClassName" border :size="size">
              <el-table-column prop="productId" label="ID" sortable align="center"></el-table-column>
              <!-- <el-table-column prop="code" label="商品编码" sortable  align="center"></el-table-column> -->
              <el-table-column prop="chineseName" label="商品名称" align="center"></el-table-column>
              <!-- <el-table-column prop="name" label="商品品牌" align="center"></el-table-column> -->
              <!-- <el-table-column prop="fullNamePath" label="商品类目" align="center"></el-table-column> -->
              <el-table-column prop="salePriceWithTax" label="零售价（元）" align="center"></el-table-column>
            </el-table>
          </div>
          <productListTemplate @getModuleProductList="getModuleProductList" :moduleId="addModuleCode.moduleId"
                               :productListTemplateVisible="productListTemplateVisible"
                               @productListTemplateVisibleFun="productListTemplateVisibleFun"></productListTemplate>
        </div>

        <div v-if="addModuleCode.code == 'TWO_LINE_PRODUCT_CODE'">
          <moduleTwoLine :moduleId="addModuleCode.moduleId" :moduleNameDataForm="addModuleCode.variablesObject"
                         :moduleNameDialogVisible="moduleNameDialogVisible"
                         @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                         ref="moduleName"></moduleTwoLine>
        </div>

        <!-- 导航部分 -->
        <div v-if="addModuleCode.code == 'NAVIGATION_CODE'">
          <navigationCode :moduleId="addModuleCode.moduleId" :tableData="addModuleCode.variablesObject"
                          :moduleNameDialogVisible="moduleNameDialogVisible"
                          @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                          ref="moduleName"></navigationCode>
        </div>

        <!-- 一行多图 -->
        <div v-if="addModuleCode.code == 'ONE_LINE_IMG_CODE_1'">
          <oneLineImgCode1 :moduleId="addModuleCode.moduleId" :datas="addModuleCode.variablesObject"
                           :fileList="addModuleCode.fileList" :iconList="addModuleCode.iconList"
                           :moduleNameDialogVisible="moduleNameDialogVisible"
                           @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                           ref="moduleName"></oneLineImgCode1>
        </div>

        <!-- 一行三图 -->
        <div v-if="addModuleCode.code == 'ONE_LINE_IMG_CODE_2'">
          <oneLineImgCode2 :moduleId="addModuleCode.moduleId" :datas="addModuleCode.variablesObject"
                           :fileList="addModuleCode.fileList" :iconList="addModuleCode.iconList"
                           @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                           ref="moduleName"></oneLineImgCode2>
        </div>

        <!-- 三行三列 -->
        <div v-if="addModuleCode.code == 'THREE_LINE_PRODUCT_CODE'">
          <threeLineProductCode :moduleId="addModuleCode.moduleId" :datas="addModuleCode.variablesObject"
                                :fileList="addModuleCode.fileList" :iconList="addModuleCode.iconList"
                                :tableData="addModuleCode.tableData"
                                @TitleMapDialogVisibleFun="TitleMapDialogVisibleFun" @getIndex="getIndex"
                                ref="moduleName"></threeLineProductCode>
        </div>

        <!-- 微众编辑模块 -->
        <!--微众单图模板-->
        <div v-if="addModuleCode.code == 'WX_TITLE_CODE'">
          <wxTitleImage :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                        :SinglEMapDialogVisible="SinglEMapDialogVisible"
                        @SinglEMapDialogVisibleFun="SinglEMapDialogVisibleFun" @getIndex="getIndex"></wxTitleImage>
        </div>
        <!--微众轮播-->
        <div v-if="addModuleCode.code == 'WX_BANNER_CODE'">
          <wxBannerList :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                        :MoreMapDialogVisible="MoreMapDialogVisible" @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                        @getIndex="getIndex"></wxBannerList>
        </div>
        <!--微众合作-->
        <div v-if="addModuleCode.code == 'WX_COMPANION_CODE'">
          <wxCompanion :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                       :MoreMapDialogVisible="MoreMapDialogVisible" @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                       @getIndex="getIndex"></wxCompanion>
        </div>
        <!--微众商城长合作-->
        <div v-if="addModuleCode.code == 'WX_COMPANIONLONG_CODE'">
          <wxCompanionLong :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                           :MoreMapDialogVisible="MoreMapDialogVisible"
                           @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun" @getIndex="getIndex"></wxCompanionLong>
        </div>
        <!-- 微众商城两列商品 -->
        <div v-if="addModuleCode.code == 'WX_TWOCOLUMN_CODE'">
          <wxTwoColumn :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                       :MoreMapDialogVisible="MoreMapDialogVisible" @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                       @getIndex="getIndex"></wxTwoColumn>
        </div>
        <!-- 微众秒杀 -->
        <div v-if="addModuleCode.code == 'WX_SECKILL_CODE'">
          <wxSeckill :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                     :SinglEMapDialogVisible="SinglEMapDialogVisible"
                     @SinglEMapDialogVisibleFun="SinglEMapDialogVisibleFun" @getIndex="getIndex"></wxSeckill>
        </div>
        <!--微众三列滚动-->
        <div v-if="addModuleCode.code == 'WX_THREECOLSKIDER_CODE'">
          <wxThreeColskider :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                            :MoreMapDialogVisible="MoreMapDialogVisible"
                            @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun" @getIndex="getIndex"></wxThreeColskider>
        </div>
        <!--微众滚动-->
        <div v-if="addModuleCode.code == 'WX_SLIDER_CODE'">
          <wxSlider :moduleId="addModuleCode.moduleId" :singlList="addModuleCode.variablesObject"
                    :MoreMapDialogVisible="MoreMapDialogVisible" @MoreMapDialogVisibleFun="MoreMapDialogVisibleFun"
                    @getIndex="getIndex"></wxSlider>
        </div>
      </el-main>
    </el-container>

    <!-- 预览弹窗 -->
    <el-dialog title="首页配置预览" :visible.sync="previewDialogVisible" width="40%" :before-close="ClosePreviewDialog">
      <div class="preview-wrap">
        <!-- 头部（包含更过部分） -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-1'" :style="{'order': item.sort}">
          <indexTitles v-if="item.code == 'MODULE_NAME_CODE'" :sessionTitle="item.variablesObject"></indexTitles>
        </div>

        <!-- 一行展示三个商品 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-2'" :style="{'order': item.sort}">
          <threeLists v-if="item.code == 'THREE_PRODUCT_CODE'" :id="item.moduleId"></threeLists>
        </div>

        <!-- 一行展示两个商品部分 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-3'" :style="{'order': item.sort}">
          <twoLists v-if="item.code == 'TWO_PRODUCT_CODE'" :id="item.moduleId"></twoLists>
        </div>

        <!-- 轮播图 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-4'" :style="{'order': item.sort}">
          <indexSwipers v-if="item.code == 'MULTI_IMAGE_CODE'" :images="item.variablesObject"></indexSwipers>
        </div>

        <!-- 图片部分 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-5'" :style="{'order': item.sort}">
          <indexImages v-if="item.code == 'SINGLE_MAP_CODE'" :sessionImage="item.variablesObject"></indexImages>
        </div>

        <!-- 导航 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-6'" :style="{'order': item.sort}">
          <navigationCodeDialog v-if="item.code == 'NAVIGATION_CODE'"
                                :variablesObject="item.variablesObject"></navigationCodeDialog>
        </div>

        <!-- 一行多图 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-7'" :style="{'order': item.sort}">
          <variablesDialog v-if="item.code == 'ONE_LINE_IMG_CODE_1'"
                           :variablesObject="item.variablesObject"></variablesDialog>
        </div>

        <!-- 一行三图 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-8'" :style="{'order': item.sort}">
          <variablesDialog3 v-if="item.code == 'ONE_LINE_IMG_CODE_2'"
                            :variablesObject="item.variablesObject"></variablesDialog3>
        </div>

        <!-- 三行三图 -->
        <div class="wrap" v-for="(item,index) in sortList" :key="index + '-9'" :style="{'order': item.sort}">
          <threeLineDialog v-if="item.code == 'THREE_LINE_PRODUCT_CODE'"
                           :variablesObject="item.variablesObject"></threeLineDialog>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="previewDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="previewDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 轮播图新增弹窗 -->
    <!-- 名称新增弹窗 -->
    <!-- 单图新增弹窗 -->
    <!-- 两个商品弹窗 -->
    <!-- 三个商品弹窗 -->
  </div>
</template>

<script>
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {
    format
  } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  // 引入首页模板渲染组件
  import indexTitles from "./component/indexTitle";
  import indexImages from "./component/indexImages";
  import twoLists from "./component/twoList";
  import threeLists from "./component/threeList";
  import indexSwipers from "./component/indexSwiper";

  // 引入添加(编辑)模板组件 addImage
  import addImages from "./component/addImage";
  import moreImages from "./component/SinglImageUploadTemplate";
  import moduleName from "./component/ModuleNameTemplate";
  import moduleTwoLine from "./component/ModuleTwoLineTemplate";
  import productListTemplate from "./component/ProductListTemplate";

  import navigationCode from "./component/navigationCode"; //导航部分
  import oneLineImgCode1 from "./component/oneLineImgCode1"; //一行多图部分
  import oneLineImgCode2 from "./component/oneLineImgCode2"; //一行三图部分
  import threeLineProductCode from "./component/threeLineProductCode"; //三行三图部分

  import navigationCodeDialog from "./component/navigationCodeDialog"; //预览导航
  import variablesDialog from "./component/variablesDialog"; //一行多图导航
  import variablesDialog3 from "./component/variablesDialog3"; //一行3图导航
  import threeLineDialog from "./component/threeLineDialog"; //一行3图导航

  import wxTitleImage from "./component/WXTitleImage";// 微众标题模板
  import wxBannerList from "./component/WXBannerList"; // 微众轮播图模板
  import wxCompanion from "./component/WXCompanion"; // 微众合作模板
  import wxCompanionLong from "./component/WXCompanionLong"; // 微众商城长合作
  import wxTwoColumn from "./component/WXTwoColumn"; // 微众商城两列商品
  import wxSeckill from "./component/WXSeckill"; // 微众秒杀
  import wxThreeColskider from "./component/WXThreeColskider"; // 微众三列滚动
  import wxSlider from "./component/WXSlider"; // 微众滚动

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
      indexTitles,
      indexImages,
      twoLists,
      threeLists,
      indexSwipers,
      addImages,
      moreImages,
      moduleName,
      moduleTwoLine,
      productListTemplate,
      navigationCode,
      oneLineImgCode1,
      oneLineImgCode2,
      threeLineProductCode,
      navigationCodeDialog,
      variablesDialog,
      variablesDialog3,
      threeLineDialog,
      wxBannerList,
      wxTitleImage,
      wxCompanion,
      wxCompanionLong,
      wxTwoColumn,
      wxSeckill,
      wxThreeColskider,
      wxSlider
    },
    data() {
      return {
        title: "", //活动方案标题
        pageType: '',
        startTime: '',
        endTime: '',
        itemChecked: null, //记录选中的数据
        sortList: [], // 首页配置数据
        previewDialogVisible: false, // 是否显示预览弹窗
        totalList: [], // 模板数据
        selectedList: [], // 已添加模块
        size: "small", // form表单尺寸
        pageId: this.$route.query.pageId,
        addModuleCode: {}, // 新增模板数据
        SinglEMapDialogVisible: false, //单图弹框是否展示
        MoreMapDialogVisible: false, //多图弹框是否展示
        moduleNameDialogVisible: false, //标题弹框是否展示
        productListData: [], // 商品List
        productListloading: false, //商品表格加载List
        productListTemplateVisible: false, //商品弹窗是否显示
        moduleNameDataForm: {},
        testImg: require('@/assets/images/test.jpg'),
      };
    },

    methods: {
      removeImgList(fileList) {
        this.addModuleCode.variablesObject = fileList;
      },
      /**
       * 弹窗显示
       */
      showProductList() {
        this.productListTemplateVisible = true;
      },
      /**
       * 弹窗是否显示
       */
      productListTemplateVisibleFun() {
        this.productListTemplateVisible = false;
      },
      //table的双色条纹
      tableRowClassName({
                          row,
                          rowIndex
                        }) {
        if (rowIndex === 1) {
          return "warning-row";
        } else if (rowIndex === 3) {
          return "success-row";
        }
        return "";
      },
      //修改table header的背景色
      tableHeaderColor({
                         row,
                         column,
                         rowIndex,
                         columnIndex
                       }) {
        if (rowIndex === 0) {
          return "background-color:rgb(250,250,250);";
        }
      },
      /**
       * 单图上传弹窗
       */
      SinglEMapDialogVisibleFun() {
        this.SinglEMapDialogVisible = false;
      },
      /**
       * 多图上传弹窗
       */
      MoreMapDialogVisibleFun() {
        this.MoreMapDialogVisible = false;
      },
      /**
       * 多图上传弹窗
       */
      TitleMapDialogVisibleFun() {
        this.moduleNameDialogVisible = false;
      },
      // 添加模块对应的模块
      addModule(item) {
        this.itemChecked = item;
        this.addModuleCode = {
          code: item.code,
          moduleId: item.moduleId
        };
        if (item.code == "SINGLE_MAP_CODE") {
          // this.SinglEMapDialogVisible=true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "MULTI_IMAGE_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "MODULE_NAME_CODE") {
          if (item.variablesObject == null) {
            this.addModuleCode.variablesObject = {
              jumpLink: "",
              title: ""
            };
          } else {
            this.addModuleCode.variablesObject = item.variablesObject;
          }
        } else if (
          item.code == "TWO_PRODUCT_CODE" ||
          item.code == "THREE_PRODUCT_CODE"
        ) {
          this.getModuleProductList(item);
        } //导航栏
        else if (item.code == "NAVIGATION_CODE") {
          this.MoreMapDialogVisible = true;
          if (item.variablesObject == null) {
            this.addModuleCode.variablesObject = [];
          } else {
            this.addModuleCode.variablesObject = item.variablesObject;
          }
        } //一行多图
        else if (item.code == "ONE_LINE_IMG_CODE_1") {
          if (item.variablesObject == null) {
            this.addModuleCode.variablesObject = {
              "subTitle": "",
              "title": "",
              "desc": ""
            };
          } else {
            this.addModuleCode.variablesObject = item.variablesObject;
            this.addModuleCode.fileList = item.variablesObject.imgUlrList ?
              item.variablesObject.imgUlrList : [];
            this.addModuleCode.iconList = item.variablesObject.icon ?
              item.variablesObject.icon : [];
          }
        }
        //一行三图
        else if (item.code == "ONE_LINE_IMG_CODE_2") {
          if (item.variablesObject == null) {
            this.addModuleCode.variablesObject = {
              "title": "",
              "desc": ""
            };
          } else {
            this.addModuleCode.variablesObject = item.variablesObject;
            this.addModuleCode.fileList = item.variablesObject.imgUlrList ?
              item.variablesObject.imgUlrList : [];
            this.addModuleCode.iconList = item.variablesObject.icon ?
              item.variablesObject.icon : [];
          }
        }
        //三行三列
        else if (item.code == "THREE_LINE_PRODUCT_CODE") {
          if (item.variablesObject == null) {
            this.addModuleCode.variablesObject = {
              "title": "",
              "desc": ""
            };
          } else {
            this.addModuleCode.variablesObject = item.variablesObject;
            this.addModuleCode.fileList = item.variablesObject.imgUlrList ?
              item.variablesObject.imgUlrList : [];
            this.addModuleCode.iconList = item.variablesObject.icon ?
              item.variablesObject.icon : [];
            this.addModuleCode.tableData = item.variablesObject.tableData ?
              item.variablesObject.tableData : [];
          }
        } else if (item.code == "WX_TITLE_CODE") {//微众模块
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_BANNER_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_COMPANION_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_COMPANIONLONG_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_TWOCOLUMN_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "SINGLE_MAP_CODE") {
          // this.SinglEMapDialogVisible=true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_THREECOLSKIDER_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        } else if (item.code == "WX_SLIDER_CODE") {
          this.MoreMapDialogVisible = true;
          this.addModuleCode.variablesObject = item.variablesObject || [];
        }
      },
      /**
       * 查询模板商品
       */
      getModuleProductList(item) {
        this.utils.request.getIndexList({
          moduleId: item.moduleId
        }, res => {
          console.log(res);
          if (res.code == "0000") {
            this.productListData = res.data;
          }
        });
      },

      // 保存模板编辑 IndexSave
      saveIndex() {
        const params = {
          title: this.title,
          pageId: this.pageId,
          pageType: this.pageType,
          startTime: this.startTime,
          endTime: this.endTime,
        };
        // IndexSave
        this.utils.request.IndexSave(params, res => {
          // 跳转到配置列表页
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.$router.push("/Pages/Configuration/Cms/CmsPages");
        });
      },

      // 预览模板 请求接口赋值给 sortList
      previewIndex() {
        const params = {
          pageId: this.pageId
        };
        this.utils.request.getIndexData(params, res => {
          if (
            // res.data &&
            // res.data.pageModuleResponseList &&
            // res.data.pageModuleResponseList.length > 0 &&
            // res.data.pageModuleResponseList[0].variables.length > 0
            true

          ) {

            this.sortList = res.data.pageModuleResponseList;
            this.selectedList = res.data.pageModuleResponseList;

            this.previewDialogVisible = true;

          } else {
            this.$message({
              message: '请先添加图片',
              type: 'warning'
            });
          }
        });
      },

      // 获取首页已经设置的配置数据
      getIndex() {
        const params = {
          pageId: this.pageId
        };
        let this_ = this;
        this_.utils.request.getIndexData(params, res => {
          if (
            res.data &&
            res.data.pageModuleResponseList &&
            res.data.pageModuleResponseList.length > 0
          ) {

            //  判断数据进行回显
            this.title = res.data.title;
            this.pageType = res.data.pageType;
            this.startTime = res.data.startTime;
            this.endTime = res.data.endTime;
            this.sortList = res.data.pageModuleResponseList;
            this.selectedList = res.data.pageModuleResponseList;

            // if (this_.itemChecked != null) {
            //   this_.addModule(this_.itemChecked);
            // }
          } else {
            //  判断数据进行回显
            this_.sortList = [];
            this_.selectedList = [];
            this.title = res.data.title;
            this.pageType = res.data.pageType;
            this.startTime = res.data.startTime;
            this.endTime = res.data.endTime;
          }
        });
      },

      // 关闭预览模板
      ClosePreviewDialog() {
        this.previewDialogVisible = false;
      },

      // 上移对应的模块 IndexMove
      upItem(item) {
        let this_ = this;
        const params = {
          moduleId: item.moduleId
        };

        this.selectedList.forEach((s, index) => {
          if (s.moduleId == item.moduleId) {
            if (index != 0) {
              params.toModuleId = this_.selectedList[index - 1].moduleId;
            }
          }
        });

        this.utils.request.IndexMove(params, res => {
          if (res.code == "0000") {
            this_.getIndex();
          }
        });
      },

      // 下移对应的模块 IndexMove
      downItem(item) {
        let this_ = this;
        const params = {
          moduleId: item.moduleId
        };

        this.selectedList.forEach((s, index) => {
          if (s.moduleId == item.moduleId) {
            if (index != this_.selectedList.length - 1) {
              params.toModuleId = this_.selectedList[index + 1].moduleId;
            }
          }
        });

        this.utils.request.IndexMove(params, res => {
          if (res.code == "0000") {
            this_.getIndex();
          }
        });
      },

      // 删除对应的模块 deleteIndex  获取当前模块id，在已选择数据中将该模块删除
      deleteItem(item) {
        const params = {
          moduleId: item.moduleId
        };
        let this_ = this;
        this.utils.request.deleteIndex(params, res => {
          if (res.code == "0000") {
            this_.getIndex();
          }
        });
      },
      //返回上一页;
      back() {
        this.$router.push("/Pages/Configuration/Cms/CmsPages");
      },
      // 添加模块, 传参是模板id 页面id  栏目id  addIndex
      addTemplate(item) {
        const params = {
          templateCode: item.code,
          templateDataType: item.dataType,
          templateId: item.id,
          templateName: item.name,
          previewImg: item.previewImg,
          pageId: this.pageId,
          platform: 1
        };
        let this_ = this;
        this.utils.request.addIndex(params, res => {
          console.log(res, "--------------resxinzemgh ---------------");
          // 先获取已编辑模块数据
          if (res.data) {
            let data = {
              code: res.data.code,
              dataType: res.data.dataType,

              moduleId: res.data.moduleId,
              previewImg: res.data.previewImg,
              sort: res.data.sort,
              variablesObject: res.data.variablesObject
            };
            this_.selectedList.push(data);
          }
        });
      },

      handleClick: function () {
      },

      // 获取底部所有模块部分
      getBottomData() {
        this.utils.request.cmsTemplateListAll({
          platform: 1
        }, res => {
          this.totalList = res.data;
          console.log(this.totalList)
        });
      }
    },

    mounted() {
      //查询CMS模块儿
      this.getBottomData();

      // 获取首页已经配置数据
      this.getIndex();
    }
  };
</script>

<style lang="scss" scoped>
  /* 左侧编辑部分样式 */
  .left-wrap {
    min-height: 600px;
    max-height: 750px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .productProduct {
    margin-bottom: 15px;
    text-align: left;
  }

  /* 预览部分样式 */
  .preview-wrap {
    width: 375px;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  /* 保存 预览按钮部分样式 */
  .common-save {
    padding: 5px 10px;
    margin: 10px 15px 0 0;
  }

  .item {
    padding-top: 10px;
    overflow-y: auto !important;
  }

  .editor-container {
    width: 500px;
    height: 700px;
    overflow-y: scroll;
    height: auto;
    overflow: hidden;
    margin: 20px 0 0 20px;

    .editor-header {
      width: 100%;
      height: 80px;
      border: 1px solid #ddd;
      position: relative;
      background: #f5f5f5;
      border-radius: 20px 20px 0 0;
      box-sizing: border-box;

      &::before {
        display: block;
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: #ddd;
        position: absolute;
        top: 35px;
        left: 160px;
      }

      &::after {
        content: "";
        display: block;
        width: 100px;
        height: 14px;
        border-radius: 7px;
        background: #ddd;
        position: absolute;
        top: 35px;
        left: 190px;
      }
    }

    .editor-main-container {
      width: 100%;
      min-height: 700px;
      position: relative;
      background: #fff;
      border: 1px solid #ddd;
      border-top: 0 none;
      padding: 10px;
      box-sizing: border-box;

      .module {
        position: relative;
        width: 100%;
        margin-bottom: 5px;

        .module-image {
          display: block;
          width: 100%;
          height: auto;
        }

        .editor-module {
          // display: none;
          width: 100%;
          height: 100%;
          border: 1px dashed red;
          position: absolute;
          top: 0;
          left: 0;

          .editor-module-item {
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            justify-content: flex-end;

            a {
              color: #fff;
              text-decoration: none;
              background-color: rgba(0, 0, 0, 0.7);
              padding: 6px 10px;
              margin-right: 1px;
              display: block;
            }
          }
        }
      }

      .module:hover .editor-module {
        display: block;
      }

      .edit-button-container {
        width: 100%;
        padding-bottom: 60px;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .edit-button {
          position: relative;
          background-color: #39ac69;
          margin: 10px 15px;
          font-size: 12px;
          border-radius: 2px;

          a {
            display: block;
            padding: 5px 10px;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            color: #fff;
            text-decoration: none;
          }

          .edit-image {
            display: none;
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 200px;
            display: none;
            z-index: 9999;
          }
        }

        .edit-button:hover .edit-image {
          display: block;
        }
      }
    }

    .save-container {
      width: 460px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.8);
      position: fixed;
      bottom: 0;

      .save {
        padding: 5px 10px;
        background-color: #39ac69;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
      }
    }
  }
</style>
